<template>
   <el-container>
     <el-header style="height:100px"><h1>江西省万亩圩堤加固整治工程建设管理信息直报系统</h1>
        <span class="user"><i class="icon iconfont icon-z-user" style="padding-left:15px,font-size:20px"></i>{{user}}</span>
        <span class="fenge">|</span>
        <span class="out" @click="toLogin">退出<i class="iconfont icon-tuichu" style="padding-left:15px"></i></span>
     </el-header>
     <el-container>
       <el-aside width="350px" height='100%' style="border-right:1px solid #ddd" class="aside">
                      <!-- side -->
          <el-menu
             :default-active="currentMenu"
             class="el-menu-vertical-demo"
             :router='true'
              >
             <el-menu-item index="/jectbase">
               <template slot="title">
                 <i class="iconfont icon-jibenziliao"></i>
                 <span>基础信息</span>
               </template>
             </el-menu-item>
             <el-submenu index="/prejinzhang">
                 <template slot="title">
                   <i class="iconfont icon-xinxishangbao"></i>
                   <!-- <span>信息上报</span> -->
                    <el-badge  :value='earlyNum+processNum|getNum' class="item">信息上报</el-badge>
                 </template>
                 <el-menu-item-group>
                   <!-- <template slot="title">分组一</template> -->
                   <el-menu-item index="/prejinzhang">
                     <el-badge  :value='earlyNum|getNum' class="item">前期工作月报信息</el-badge>
                    </el-menu-item>
                   <el-menu-item index="/zijing">
                      <el-badge :value='processNum|getNum' class="item" >进度月报信息 </el-badge>   
                   </el-menu-item>
                 </el-menu-item-group>
              </el-submenu>
             <!-- <el-menu-item index="/jectCheck">
               <i class="iconfont icon-tongjifenxi1" style="font-size:18px"></i>
               <span slot="title">统计分析</span>
             </el-menu-item> -->
              <el-submenu index="/jectCheck"  v-if="userLevel==3">
                 <template slot="title">
                   <i class="iconfont icon-tongjifenxi1"></i>
                   <span>统计分析</span>
                 </template>
                 <el-menu-item-group>
                   <!-- <template slot="title">分组一</template> -->
                   <el-menu-item index="/chartOne">
                     <el-badge   class="item">完成主体工程投资占批复投资情况</el-badge>
                    </el-menu-item>
                   <el-menu-item index="/chartTwo">
                      <el-badge  class="item" >完成投资占批复总投资情况</el-badge>   
                   </el-menu-item>
                 </el-menu-item-group>
              </el-submenu>
             <el-menu-item index="/notice">
               <i class="iconfont icon-gonggao" style="font-size:18px"></i>
               <span slot="title">通知</span>
             </el-menu-item> 
             <el-menu-item index="/jinzhang">
               <i class="iconfont icon-xitongguanli1" style="font-size:18px"></i>
               <span slot="title">系统管理</span>
             </el-menu-item> 
          </el-menu>

       </el-aside>
       <el-main>
         <!-- Main -->
         <div class="mainOut">
          <!-- <keep-alive> -->
         <router-view class="main"></router-view>
         <!-- </keep-alive> -->
         </div>
       </el-main>
     </el-container>
   </el-container>
</template>
<script>
import Bus from '../Bus.js'
// import functions from '../content.js'
export default {
  data(){
    return{
        user:'',
        currentMenu:'',
        earlyNum:null,
        processNum:null,
        userLevel:'',
    }
  },
  methods:{
    toLogin(){
        var _this = this
        var thisDate = (new Date()).getTime()
        this.$router.push({path:'/'}) 
        this.$axios.get('/user/useresc',{
          params:{
            thisDate:thisDate
          }
        }).then(function(res){
          var data = res.data.responseCode
          if(data=='1'){
              _this.$message({
                message: '已安全退出',
                type: 'warning'
              });
          }else{
              _this.$message({
                message: '本次退出为非安全退出',
                type: success
              });
          }
        })
       
    },
  },
  filters:{
    getNum:function(value){
      if(value==0){
        return null
      }else{
        return value
      }
    }
  },
  mounted(){
    let _this = this
    Bus.$on('changestate',function(){
       var thisDate = (new Date()).getTime()
      _this.$axios.get('/dikeInfo/getcandikenum',{params:{thisDate:thisDate}}).then(function(res){
              var data = res.data.responseData;
              _this.earlyNum = data.earlyNum
              _this.processNum = data.processNum    
          }).catch(function(err){
        
      })
    }); 
      this.currentMenu = this.$route.path
       Bus.$emit('changestate')
  },
  created(){
    var storage = window.localStorage;
    this.user =storage.getItem('unitMessage')
    this.userLevel = storage.getItem('level')
  }
}
</script>
<style>
.mainOut{
  position: relative;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
   min-height:100%;
}
.main{
  background:#fff;
  position: absolute;
  top:10px;
  left:10px;
  /* margin-top:10px; */
  /* margin-left: 10px; */
  height: auto;
  overflow: hidden;
}
#app{
  min-width: 1425px;
}
.footer{
    background: #fff;
    font-size:18px;
    color:#ccc;
    position: relative;
    margin-top:50px
}
.aside .el-badge__content.is-fixed{
  position: absolute;
  top:10px;
  right: -10px;
}
.content_base{
    background:#fff;
    height: auto;
    min-height: 100%;
    width: 100%;
    padding-right: 20px
  }
  .el-tabs__item{
    font-size:16px!important;
  }
  .el-form-item__content{
    font-size:18px!important;
  }
  .el-form-item__label{
     font-size:18px!important;
  }
.cell,.cell span{
  font-size:18px!important;
}

</style>


<style scoped>
  .el-header, .el-footer {
    /* background-color: #B3C0D1; */
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-header{
    position: relative;
    background-image:url('../assets/imges/topbg.jpg');
    background-size:100%;
    background-position:0 24%
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #f7f7f7;
    color: #333;
    text-align: center;
    padding: 0px;
    overflow-x: hidden;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-container.is-vertical{
    height: 100%
  }

  h1{
    margin: 0;
    padding: 0;
    line-height: 100px;
    position: absolute;
    font-size:30px
  }
  .el-header .out,.el-header .user,.el-header .fenge{
    position: absolute;
    right:180px;
    bottom: 0px;
    font-size: 22px;
    cursor: pointer;
    color:#fff
  }
  .el-header .fenge{
    margin-right:10px;
    margin-left:20px
  }
  .el-header .user{
    color: #fff;
    right: 290px;
    cursor:auto;
    font-size:22px;
    /* border-right:1px solid #aaa; */
  }
  .el-header .fenge{
    right:265px;
    cursor:auto;
  }
.el-aside{
  /* border-left: 1px solid red; */
  padding-top: 10px;
  background: #fff;
}

.el-menu{
  height:100%;
  text-align: left;
  border: none;
  /* overflow: hidden; */
}
.el-menu-item{
  height: 60px;
  line-height: 60px;
}
.iconfont{
  padding-right: 10px;
}
 .el-menu-item,.el-submenu__title *{
   font-weight:700!important;
   font-size:18px!important
 }
 .el-menu-item li::before{
   font-weight:700!important;
   font-size:18px!important
 }
 .el-menu-item span{
   font-weight:700!important;
   font-size:18px!important
 }
 .el-submenu .el-menu-item{
   font-weight:700!important;
   font-size:18px!important
 }
 .user .iconfont{
   font-size:18px!important
 }
</style>
